React Hook Form + MUI Autocomplete で絞り込み検索機能付きのプルダウンリストを作ってみた

React Hook Form v7 と MUI v5（Autocomplete コンポーネント）を利用してフィルター検索機能付きのプルダウン（ドロップダウン）リストを作ってみました。

#React

#MUI

下田祐士

2022.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

React を触り始めてからそろそろ１年くらいの下田です。

沢山ある選択肢の中からいくつかのデータを指定するようなケースにおいて、ユーザーが延々とプルダウンリストをスクロールしたり、大量のデータの中から目的とする選択肢を目視で探すという状況は非常に辛いものがあります。また、そういった UI が提供された場合に利用者の立場で考えると体験があまりよろしくないというのは容易に推測できます。

Web アプリ開発を始めたばかりの頃（の私）は漠然と、「絞り込み検索機能付きのプルダウンリストって作るのが難しいんだろうなぁ」と考えておりましたが MUI（旧名称：Material UI）の Autocomplete というコンポーネントを利用すると頑張らずに実装できることが分かりました。

そこで今回は、react-hook-form v7 と組み合わせた絞り込み検索機能付きのプルダウンリストの実装サンプルをご紹介したいと思います。

なお、ソースコードは下記の GitHub リポジトリで公開しております。

サンプル

実際に触ってみていただいた方が分かりやすいと思いますので、CodeSandbox を利用して公開しているサンプルフォームを掲載します。

プルダウンの選択肢（データ）は、MUI Autocomplete のサンプルコードから拝借しております（映画の題名）

Single Select は、１つ映画が選択できます。例えば、テキスト入力フィールドへ Toy と入力すると "Toy Story 3" と "Toy Story" の２つのタイトルが絞り込まれることが確認できます。（実際に試してみてください）

Multi Select は複数選択可能なプルダウンリストになっています。また、CONFIRM ボタンをクリックするとフォームで入力されたデータ（JSON）がダイアログウィンドウで表示されます。

コードの紹介

Single Select のプルダウンリストを生成するコードは、18行ほど

autocomplete-sample/src/App.js#L177-L194

Controller コンポーネントは、react-hook-form からインポートされたラッパーコンポーネントです。render prop に Autocomplete コンポーネントを指定することでイベントおよび入力値を react-hook-form にアタッチします。

Controller

Autocomplete コンポーネントが今回のメインです。options には、プルダウンリストの元データとなる配列（サンプルでは、top100Films）を指定します。また、renderInput に TextField コンポーネントを指定することで、テキスト入力可能なプルダウンリストをレンダリングします。

最後に onChange へプルダウンリストから値が選択（変更）された際の動作として react-hook-form の setValue() を利用し single フィールドへ指定された値を設定します。